import React, { Component } from 'react';
import './index.scss'
import { Carousel } from 'antd-mobile';
// import { observer, inject } from 'mobx-react';

// @inject('store')
// @observer

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            listImg: [
                'https://plf-new.zhuishushenqi.com/management/images/20191218/3e86af2d9d374766b1a843eb9520dd15.jpg',
                'https://plf-new.zhuishushenqi.com/management/images/20191210/ad193aca91b14f7293c931d15bd75b91.jpg',
                'https://plf-new.zhuishushenqi.com/management/images/20191227/44b8da9d857448229a14894fbc9a08a5.jpg'
            ],
            index: 0
        }
    }
    render() {
        console.log(111)
        return (
            <div className="container">
                <div className="box">
                    <header className="h1">
                        <div className="logo"></div>
                        <div className="sex">
                            <span className="boy">男生</span>
                            <span className="girl">女生</span>
                        </div>
                        <div className="b1 iconfont">
                            <span className="icon icon-shujia1"></span>
                        </div>
                        <div className="b2 iconfont">
                            <span className="icon icon-denglu"></span>
                        </div>

                    </header>
                    <div className="content">
                        <div className="search">
                            <input type="text" />
                        </div>
                        <div className="banner">
                            <Carousel
                                autoplay={true}
                                infinite
                                >
                                {
                                this.state.listImg.map((item, index) => {
                                    return (
                                        <img key={index} src={item} alt=""
                                        style={{ width: '100%', verticalAlign: 'top',height:'1.8rem' }}
                                        />
                                    )
                                })
                                }
                            </Carousel>
                        </div>
                        <div className="book-section">
                            <div className="title">畅销短篇</div>
                            <div className="book-list">
                                <div className="list">
                                    <div className="img"></div>
                                    <div className="right">
                                        <h4 className="name">
                                            <span className="bookname">烟雨围城</span>
                                            <span className="complete">完结</span>
                                        </h4>
                                        <div className="desc">
                                            他是人人得而诛之的贼子，嗜血残忍，阴狠恶毒，而她，成为了他的俘虏，却发现他竟是她昔日抛弃的恋人？
                                            冷硬的枪口压在她的太阳穴上，精致的旗袍在他手里化为碎片，他对她极尽羞辱折磨……“说，谁派你来杀我的？”“你的组织是什么？”“你的上线是谁？”
                                            旧时海上，繁花如梦，家国情仇，不知归路……</div>
                                        <div className="cate">
                                            <div className="category">
                                                <div>国民情仇</div>
                                                <div><span>666</span>人气</div>
                                            </div>
                                            <div className="tag">现代言情</div>
                                        </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default Home;